<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图标列表</title>
<link rel="stylesheet" type="text/css" href="../plui/themes/default/plui.css">
<link rel="stylesheet" type="text/css" href="../plui/themes/icon.css">
<script type="text/javascript" src="../plui/jquery.js"></script>
<script type="text/javascript" src="../plui/plui.core.js"></script>
<script type="text/javascript">

$(function(){
	$('#dg_bianji').datagrid({
		fitColumns:true,
		title:'编辑类图标',
		data:[
			{name:'添加',class1:'icon-edit_add',name2:'删除',class2:'icon-edit_remove',name3:'取消',class3:'icon-cancel'},
			{name:'添加',class1:'icon-edit',name2:'编辑',class2:'icon-pencil',name3:'关闭',class3:'icon-no'},
			{name:'剪切',class1:'icon-cut',name2:'复制',class2:'icon-copy',name3:'保存',class3:'icon-filesave'},
			{name:'重做',class1:'icon-redo',name2:'撤销',class2:'icon-undo',name3:'返回',class3:'icon-back'},
			{name:'上一步',class1:'icon-left2',name2:'下一步',class2:'icon-right2',name3:'刷新',class3:'icon-reload'},
			{name:'确定',class1:'icon-confirm',name2:'确定',class2:'icon-ok',name3:'查看',class3:'icon-watch'}
		]
	});
	
	$('#dg_caozuo').datagrid({
		fitColumns:true,
		title:'操作类图标',
		data:[{name:'向下',class1:'icon-accordion_down',name2:'向上',class2:'icon-accordion_up',name3:'设计',class3:'icon-charting'},
			{name:'顶',class1:'icon-good',name2:'踩',class2:'icon-bad',name3:'过滤',class3:'icon-funnel'},
			{name:'左',class1:'icon-previous_blue',name2:'上',class2:'icon-up_blue',name3:'右',class3:'icon-next_blue'},
			{name:'下',class1:'icon-down_blue',name2:'左',class2:'icon-han-left',name3:'上',class3:'icon-hand-up'},
			{name:'右',class1:'icon-hand-right',name2:'下',class2:'icon-hand-down',name3:'锁定',class3:'icon-lock'},
			{name:'成员信息',class1:'icon-personal-data',name2:'打印',class2:'icon-print',name3:'文件夹查询',class3:'icon-seach-in-folder'},
			{name:'放大',class1:'icon-zoomin',name2:'缩小',class2:'icon-zoomout',name3:'放大',class3:'icon-zoomin2'},
			{name:'缩小',class1:'icon-zoomout2',name2:'',class2:'',name3:'',class3:''}
			]
	});
	
	$('#dg_biaozhi').datagrid({
		fitColumns:true,
		title:'标识类图标',
		data:[
			{name:'信息',class1:'icon-info',name2:'问题',class2:'icon-question',name3:'消息',class3:'icon-content'},
			{name:'帮助',class1:'icon-help',name2:'提示',class2:'icon-tip',name3:'旗帜',class3:'icon-blueflag'},
			{name:'旗帜',class1:'icon-redflag',name2:'浏览器',class2:'icon-compass',name3:'时钟',class3:'icon-clock'},
			{name:'文件校验失败',class1:'icon-check_no',name2:'文件校验成功',class2:'icon-check_ok',name3:'文件内容查询',class3:'icon-search-in-file'},
			{name:'短信',class1:'icon-email_new',name2:'邮件',class2:'icon-email_read',name3:'无效',class3:'icon-none'},
			{name:'电脑',class1:'icon-computer',name2:'回收站',class2:'icon-trash',name3:'工具',class3:'icon-tools'},
			{name:'设置',class1:'icon-set',name2:'主页',class2:'icon-home',name3:'因特网',class3:'icon-net'},
			{name:'用户',class1:'icon-user',name2:'用户群组',class2:'icon-users',name3:'视频',class3:'icon-video'},
			{name:'网络',class1:'icon-web',name2:'标识',class2:'icon-sign',name3:'星级',class3:'icon-star'},
			{name:'查询',class1:'icon-search',name2:'列表模式',class2:'icon-detail',name3:'图标模式',class3:'icon-tile'},
			{name:'图片',class1:'icon-pic'}
		]
	});
	
	$('#dg_wenjian').datagrid({
		fitColumns:true,
		title:'文件类图标',
		data:[
			{name:'下载',class1:'icon-download',name2:'上传',class2:'icon-upload',name3:'文件夹',class3:'icon-folder'},
			{name:'文件夹存在',class1:'icon-folder1',name2:'非空文件夹',class2:'icon-folder2',name3:'共享文件夹',class3:'icon-sharefile'},
			{name:'附件',class1:'icon-upload_file'}
		]
	});
	
	$('#dg_bofang').datagrid({
		fitColumns:true,
		title:'播放类图标',
		data:[
			{name:'播放',class1:'icon-right',name2:'暂停',class2:'icon-pause',name3:'停止',class3:'icon-stop'},
			{name:'上一步',class1:'icon-left',name2:'关闭',class2:'icon-shutdown'},
			{name:'下一节',class1:'icon-next',name2:'上一节',class2:'icon-top'},
			{name:'快退',class1:'icon-speed-left',name2:'快进',class2:'icon-speed-right'}
		]
	});
	
});

</script>
</head>

<body>
	<div>
    	<table id="dg_bianji">
       	  <thead>
            	<tr>
                	<th data-options="field:'name',width:40">图标名称</th>
                    <th data-options="field:'desc',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class1+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class1',width:40">图标class</th>
                    <th data-options="field:'name2',width:40">图标名称</th>
                    <th data-options="field:'desc2',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class2+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class2',width:40">图标class</th>
                    <th data-options="field:'name3',width:40">图标名称</th>
                    <th data-options="field:'desc3',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class3+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class3',width:40">图标class</th>
                </tr>
          </thead>
        </table>
        <table id="dg_caozuo">
       	  <thead>
            	<tr>
                	<th data-options="field:'name',width:40">图标名称</th>
                    <th data-options="field:'desc',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class1+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class1',width:40">图标class</th>
                    <th data-options="field:'name2',width:40">图标名称</th>
                    <th data-options="field:'desc2',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class2+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class2',width:40">图标class</th>
                    <th data-options="field:'name3',width:40">图标名称</th>
                    <th data-options="field:'desc3',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class3+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class3',width:40">图标class</th>
                </tr>
          </thead>
        </table>
        <table id="dg_biaozhi">
       	  <thead>
            	<tr>
                	<th data-options="field:'name',width:40">图标名称</th>
                    <th data-options="field:'desc',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class1+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class1',width:40">图标class</th>
                    <th data-options="field:'name2',width:40">图标名称</th>
                    <th data-options="field:'desc2',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class2+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class2',width:40">图标class</th>
                    <th data-options="field:'name3',width:40">图标名称</th>
                    <th data-options="field:'desc3',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class3+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class3',width:40">图标class</th>
                </tr>
          </thead>
        </table>
        <table id="dg_wenjian">
       	  <thead>
            	<tr>
                	<th data-options="field:'name',width:40">图标名称</th>
                    <th data-options="field:'desc',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class1+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class1',width:40">图标class</th>
                    <th data-options="field:'name2',width:40">图标名称</th>
                    <th data-options="field:'desc2',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class2+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class2',width:40">图标class</th>
                    <th data-options="field:'name3',width:40">图标名称</th>
                    <th data-options="field:'desc3',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class3+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class3',width:40">图标class</th>
                </tr>
          </thead>
        </table>
        <table id="dg_bofang">
       	  <thead>
            	<tr>
                	<th data-options="field:'name',width:40">图标名称</th>
                    <th data-options="field:'desc',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class1+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class1',width:40">图标class</th>
                    <th data-options="field:'name2',width:40">图标名称</th>
                    <th data-options="field:'desc2',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class2+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class2',width:40">图标class</th>
                    <th data-options="field:'name3',width:40">图标名称</th>
                    <th data-options="field:'desc3',width:40,align:'center',formatter:function(value,row,index){return '<div style=\'width:16px;height:16px;margin:0 auto;\' class=\''+row.class3+'\'></div>'}">图标样式</th>
                    <th data-options="field:'class3',width:40">图标class</th>
                </tr>
          </thead>
        </table>
    </div>
</body>
</html>
